<template>
    <div>
        <ul class="nav-list">
            <li :class="{'navActive':active === i}" v-for="(item,i) in navlist" :key="item.id" @click="change(item.text,i)">{{item.text}}</li>
        </ul>
        <div class="list">
            <div v-if="list.length">
                <dl-item v-for="item in list" :key="item.id" 
                    :url="item.url"
                    :title="item.title"
                    :id="item.id"
                    :isOpen="item.isOpen"
                    @open="openFun"
                ></dl-item>
            </div>
            
            <div v-else>暂无数据</div>
        </div>
    </div>
</template>
<script>
import dlItem from '../components/dl-item' 
export default {
    components:{
        dlItem
    },
    data(){
        return {
            navlist:[],
            list:[],
            active:0,
            openList:JSON.parse(window.localStorage.getItem('openList')) || []
        }
    },
    created(){
        this.$http.get('/api/nav').then(res => {
            if(res.data.code === 1){
                this.navlist = res.data.data;
                this.list = res.data.newData.map(item => {
                    item.isOpen = false;
                    this.openList.forEach(id => {
                        if(id === item.id){
                            item.isOpen = true;
                        }
                    })
                    return item
                });
            }
        })
    },
    methods:{
        change(text,i){
            this.active = i;
            this.$http.get(`/api/list?type=${text}`).then(res => {
                if(res.data.code === 1){
                    this.list = res.data.data.map(item => {
                        item.isOpen = false;
                        this.openList.forEach(id => {
                            if(id === item.id){
                                item.isOpen = true;
                            }
                        })
                        return item
                    });;
                }
            })
        },
        openFun(id){
            let ind = this.list.findIndex(item => item.id === id);
            this.list[ind].isOpen = true;
            this.openList.push(id);
            window.localStorage.setItem('openList',JSON.stringify(this.openList));
        }
    }
}
</script>

<style lang="scss">
.nav-list{
    width:100%;
    height:44px;
    line-height: 44px;
    display: flex;
    li{
        padding:0 10px;
        &.navActive{
            color:blue;
        }
    }  
}
</style>
